<template>
  <view class="mine-container">
    <!-- 头部区域 -->
    <u-navbar :title="useT('个人中心')" left-icon=" " leftIconSize="50rpx" bg-color="transparent" :border="false" title-style="color: #000;font-weight: bold;" placeholder></u-navbar>

    <!-- 用户信息区域 -->
    <view class="user-section" @click="handleUserClick">
      <view class="user-info">
        <view class="avatar-container">
          <image class="avatar" :src="userStore.isLoggedIn ? userStore.userInfo.avatar : '/static/default-avatar.png'" mode="aspectFill" />
        </view>
        <view class="user-details">
          <view class="phone-number">
            <text>{{ userStore.isLoggedIn ? userStore.userInfo.nickname : useT('点击去登录') }}</text>
          </view>
          <view class="uid-info" v-if="userStore.isLoggedIn">
            <view class="level-badge" v-if="userStore.userInfo.level">
              <text class="level-text">{{ getLevelName(userStore.userInfo.level) }}</text>
            </view>
            <text class="uid-text">UID：{{ userStore.userInfo.uid }}</text>
            <image class="copy-icon" src="/static/mine/copy.png" mode="aspectFit" @click.stop="copyUid" />
          </view>
        </view>
      </view>
    </view>

    <!-- 邀请好友卡片 -->
    <view class="invite-card" @click="goToInvite">
      <view class="invite-content">
        <view class="invite-text">
          <view class="invite-title">{{ useT('邀请好友') }}</view>
          <!-- <view class="invite-desc">
            <text>{{ useT('最多赚取') }}</text>
            <text class="commission-text">50%</text>
            <text>{{ useT('佣金') }}</text>
          </view> -->
          <view class="invite-link">{{ useT('点击邀请') }}</view>
        </view>
        <view class="invite-illustration">
          <image class="invite-image" src="/static/mine/invite-illustration.png" mode="aspectFit" />
        </view>
      </view>
    </view>

    <!-- 功能菜单列表 -->
    <view class="menu-list">
      <view class="menu-item" v-for="(item, index) in menuItems" :key="index" @click="handleMenuClick(item)">
        <view class="menu-icon">
          <u-icon :name="item.icon" size="40rpx" :color="item.color || '#666666'"></u-icon>
        </view>
        <view class="menu-text">{{ item.name }}</view>
        <view class="menu-arrow">
          <u-icon name="arrow-right" size="24rpx" color="#CCCCCC"></u-icon>
        </view>
      </view>
    </view>

    <!-- 自定义 Tabbar -->
    <CustomTabbar :currentIndex="4" />
  </view>
</template>

<script setup>
import { updateUserInfo } from '@/api/user.js';
import CustomTabbar from '@/components/CustomTabbar.vue';
import { useUserStore } from '@/stores/user.js';
import { useT } from '@/utils/i18n.js';
import { onShow } from '@dcloudio/uni-app';
import { onMounted, ref } from 'vue';

const userStore = useUserStore();

// 功能菜单项目
const menuItems = ref();

onMounted(() => {
  // 页面初始化
});

// 页面显示时检查登录状态
onShow(() => {
  uni.hideTabBar();
  if (userStore.isLoggedIn) {
    updateUserInfo();
  }
  menuItems.value = [
    { id: 'invite', icon: 'man-add', name: useT('我的邀请'), color: '#12C284' },
    { id: 'benefits', icon: 'bookmark', name: useT('我的权益'), color: '#12C284' },
    { id: 'service', icon: 'chat', name: useT('联系客服'), color: '#12C284' },
    { id: 'auth', icon: 'account', name: useT('实名认证'), color: '#12C284' },
    { id: 'settings', icon: 'setting', name: useT('通用设置'), color: '#12C284' },
    { id: 'help', icon: 'error-circle', name: useT('帮助中心'), color: '#12C284' },
    { id: 'cases', icon: 'file-text', name: useT('最新案例'), color: '#12C284' },
    { id: 'about', icon: 'info-circle', name: useT('关于我们'), color: '#12C284' }
  ];
});

// 处理用户信息区域点击
const handleUserClick = () => {
  if (!userStore.isLoggedIn) {
    uni.navigateTo({
      url: '/pages/login/login'
    });
  } else {
    // 已登录时跳转到个人资料页面
    uni.navigateTo({
      url: '/pagesD/profile/profile'
    });
  }
};

// 导出页面生命周期方法
defineExpose({
  onShow
});

// 获取等级名称
const getLevelName = (level) => {
  const levelMap = {
    1: '启航队',
    2: '拓客队',
    3: '中坚团',
    4: '赋能导师',
    5: '协同执事',
    6: '成长领袖',
    7: '巅峰合伙人'
  };
  return useT(levelMap[level] || '');
};

// 复制UID
const copyUid = () => {
  uni.setClipboardData({
    data: '826981192',
    success: () => {
      uni.showToast({
        title: useT('UID已复制到剪贴板'),
        icon: 'success'
      });
    }
  });
};

// 跳转到邀请页面
const goToInvite = () => {
  if (!userStore.isLoggedIn) {
    uni.navigateTo({ url: '/pages/login/login' });
    return;
  }
  uni.navigateTo({ url: '/pagesA/invite/invite' });
};

// 处理菜单点击
const handleMenuClick = (item) => {
  switch (item.id) {
    case 'invite':
      uni.navigateTo({ url: '/pagesA/invite/inviteList' });
      break;
    case 'benefits':
      uni.navigateTo({ url: '/pagesA/benefits/benefits' });
      break;
    case 'service':
      uni.showToast({ title: '联系客服功能开发中', icon: 'none' });
      break;
    case 'auth':
      uni.navigateTo({
        url: '/pagesA/identity/identity'
      });
      break;
    case 'settings':
      uni.navigateTo({ url: '/pagesD/setting/setting' });
      break;
    case 'help':
      uni.showToast({ title: '帮助中心功能开发中', icon: 'none' });
      break;
    case 'cases':
      uni.showToast({ title: '最新案例功能开发中', icon: 'none' });
      break;
    case 'about':
      uni.navigateTo({ url: '/pagesD/about/about' });
      break;
    default:
      uni.showToast({ title: '功能开发中', icon: 'none' });
  }
};
</script>

<style lang="scss" scoped>
.mine-container {
  /* #ifdef H5 */
  min-height: calc(100vh - 50px);
  /* #endif */
  /* #ifndef H5 */
  min-height: 100vh;
  /* #endif */
  background: linear-gradient(to bottom, #e3f8fe 10%, #f8f8f8 50%);
  padding-bottom: 120rpx; /* 为 tabbar 留出空间 */

  // 用户信息区域
  .user-section {
    padding: 40rpx 30rpx;
    margin-bottom: 20rpx;

    .user-info {
      display: flex;
      align-items: center;

      .avatar-container {
        margin-right: 24rpx;

        .avatar {
          width: 120rpx;
          height: 120rpx;
          border-radius: 12rpx;
          background: #f0f0f0;
        }
      }

      .user-details {
        flex: 1;

        .phone-number {
          font-size: 32rpx;
          color: #333333;
          margin-bottom: 8rpx;
          font-weight: bold;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
        }

        .uid-info {
          display: flex;
          align-items: center;

          .level-badge {
            margin-right: 16rpx;
            background: linear-gradient(135deg, #12c284 0%, #0fa870 100%);
            border-radius: 20rpx;
            padding: 8rpx 16rpx;
            display: inline-flex;
            align-items: center;
            justify-content: center;

            .level-text {
              color: #ffffff;
              font-size: 22rpx;
              font-weight: 600;
              line-height: 1;
              white-space: nowrap;
            }
          }

          .uid-text {
            font-size: 28rpx;
            color: #666666;
            margin-right: 12rpx;
          }

          .copy-icon {
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }
  }

  // 邀请好友卡片
  .invite-card {
    background: #ffffff;
    border-radius: 16rpx;
    margin: 0 30rpx 20rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

    .invite-content {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .invite-text {
        flex: 1;

        .invite-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333333;
          margin-bottom: 12rpx;
        }

        .invite-desc {
          font-size: 28rpx;
          color: #666666;
          margin-bottom: 16rpx;

          .commission-text {
            color: #12c284;
            font-weight: bold;
          }
        }

        .invite-link {
          font-size: 28rpx;
          color: #12c284;
          font-weight: bold;
        }
      }

      .invite-illustration {
        .invite-image {
          width: 200rpx;
          height: 120rpx;
        }
      }
    }
  }

  // 功能菜单列表
  .menu-list {
    background: #ffffff;
    border-radius: 16rpx;
    margin: 0 30rpx 20rpx;
    overflow: hidden;

    .menu-item {
      display: flex;
      align-items: center;
      padding: 32rpx 30rpx;
      border-bottom: 1rpx solid #f5f5f5;

      &:last-child {
        border-bottom: none;
      }

      .menu-icon {
        margin-right: 24rpx;
      }

      .menu-text {
        flex: 1;
        font-size: 32rpx;
        color: #333333;
      }

      .menu-arrow {
        margin-left: 12rpx;
      }
    }
  }
}
</style>
